<template>
    <div>
        <el-form :inline="true" label-width="80px">
            <el-form-item label="表头说明">
                <el-select v-model="columnCount" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="只读模式">
                <el-select v-model="readonly" placeholder="请选择">
                    <el-option
                            label="可编辑"
                            :value="false">
                    </el-option>
                    <el-option
                            label="只读"
                            :value="true">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-divider></el-divider>


        <ResizableMultiColumnRichText
                :column-count="columnCount"
                :readonly="readonly"
                v-model="contentHeader"
        />
    </div>

</template>

<script>
    import ResizableMultiColumnRichText from "./ResizableMultiColumnRichText/ResizableMultiColumnRichText";

    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data() {
            return {
                readonly: false,
                contentHeader: [],
                columnCount: 3,

                options: [{
                    value: 0,
                    label: '不使用'
                }, {
                    value: 1,
                    label: '一栏'
                }, {
                    value: 2,
                    label: '两栏'
                }, {
                    value: 3,
                    label: '三栏'
                }, {
                    value: 4,
                    label: '四栏'
                }, {
                    value: 5,
                    label: '五栏'
                }, {
                    value: 6,
                    label: '六栏'
                }],
            }
        },
        components: {ResizableMultiColumnRichText}
    }
</script>